<template>
  <div id="dailyanalytics_detail">
    <div class="search-box">
      <Row type="flex"
           class="detail_head">
        <Row type="flex"
             justify="start"
             style="width:50%">
          <span class="system-selete-icon"></span>
          <span class="system-selete-title">每日结账明细</span>
        </Row>
        <Row type="flex"
             justify="end"
             style="width:50%">
          <div span="5"
               style="margin-right:40px;">
            <span class="system-selete-name">营业日期：</span>
            <span class="system-selete-name">{{bussinessDate}}</span>
          </div>
          <div span="5">
            <span class="system-selete-name">收款人：</span>
            <span class="system-selete-name">{{creatorName}}</span>
          </div>
        </Row>
      </Row>
    </div>
    <Table :loading="loading"
           stripe
           :columns="columns"
           :data="data"
           class="table-list"></Table>
  </div>
</template>
<script>
import { turnoverList } from '@/api/report/finance'
import { formatAmount } from '@/libs/tools'
import dayjs from 'dayjs'
export default {
  name: 'report_finance_dailyanalytics_detail',
  data () {
    return {
      loading: false,
      creatorName: '-',
      bussinessDate: '-',
      shopId: this.$route.params.shopId ? this.$route.params.shopId : '', // 门店ID
      dateTime: this.$route.params.dateTime ? this.$route.params.dateTime : '', // 时间
      columns: [
        {
          title: '收银点',
          key: 'createPosName'
        },
        {
          title: '应收金额(元)',
          key: 'receivableAmount'
        },
        {
          title: '现金收款(元)',
          key: 'cashAmount'
        },
        {
          title: 'POS刷卡(元)',
          key: 'unionAmount'
        },
        {
          title: '对公转账(元)',
          key: 'transferAccounts'
        },
        {
          title: '微信收款(元)',
          key: 'wechatAmount'
        },
        {
          title: '支付宝收款(元)',
          key: 'aliAmount'
        },
        {
          title: '备注',
          key: 'remark'
        },
        {
          title: '缴纳人',
          key: 'turnoverCreatorName'
        },
        {
          title: '收款时间',
          key: 'createTime'
        }
      ],
      data: []
    }
  },
  created () {
  },
  methods: {
    // 每日结账明细接口查询
    getTurnoverList () {
      if (!dayjs(this.dateTime).isValid()) return this.$Message.error(`参数错误`)
      this.loading = true
      turnoverList({
        merchantId: this.$store.state.user.merchantId, // 商户id
        shopIds: [
          this.shopId
        ],
        startDate: dayjs(this.dateTime).format('YYYY-MM-DD 00:00:00'),
        endDate: dayjs(this.dateTime).add(1, 'day').format('YYYY-MM-DD 00:00:00')
      })
        .then(res => {
          if (res.data.status === 200) {
            this.loading = false
            if (res.data.data && res.data.data !== null) {
              this.creatorName = res.data.data.creatorName
              this.bussinessDate = res.data.data.bussinessDate
              if (res.data.data.itemVOs && res.data.data.itemVOs.length !== 0) {
                let list = {}
                list.createPosName = '合计'
                list.receivableAmount = formatAmount(res.data.data.receivableAmountSum)// 应收金额合计
                list.cashAmount = formatAmount(res.data.data.cashAmountSum)// 现金收款合计
                list.unionAmount = formatAmount(res.data.data.unionAmountSum)// 银联收款合计
                list.wechatAmount = formatAmount(res.data.data.wechatAmountSum)// 微信收款合计
                list.aliAmount = formatAmount(res.data.data.aliAmountSum)// 支付宝收款合计
                list.transferAccounts = formatAmount(res.data.data.transferAccountsSum)// 微信收款合计
                this.data = res.data.data.itemVOs
                this.data.push(list)
              } else {
                this.data = []
              }
            } else {
              this.data = []
            }
          } else {
            this.loading = false
            this.$Message.error(`${res.data.error}`)
            this.data = []
          }
        })
        .catch(error => {
          this.loading = false
          this.$Message.error(`${error}`)
        })
    }
  },
  mounted () {
    this.getTurnoverList()
  },
  computed: {}
}
</script>
<style lang='less'>
#dailyanalytics_detail {
  .detail_head {
    padding: 24px 32px 0 32px;
    border: none;
    background: #ffffff;
    .system-selete-icon {
      display: inline-block;
      background: #2d8cf0;
      height: 20px;
      width: 8px;
    }
    .system-selete-title {
      display: inline-block;
      font-size: 14px;
      color: #464c5b;
      letter-spacing: 0;
      text-align: justify;
      margin-left: 10px;
      vertical-align: middle;
    }
    .system-selete-name {
      font-size: 12px;
      color: #464c5b;
      letter-spacing: 0;
      text-align: justify;
    }
  }
}
</style>
